<template>
  <div>
    <div class="Edit_Div1"></div>
    <div class="NameEditCls">
      <el-row>
        <el-col :span="24">
          <div>
            <el-button @click="$router.go(-1)" type="info" icon="el-icon-arrow-left" size="mini">返回</el-button>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <!-- 表单开始 -->
          <el-form ref="TaskFrom" :rules="rules" :model="TaskFrom" label-width="100px" label-position="top"
            :inline="true" size="medium">
            <el-col :span="12">
              <!-- 类型下拉框 el-select-->
              <el-form-item label="类型" prop="TypeID">
                <el-select v-model="TaskFrom.TypeID" placeholder="请选择" style="width:100%">
                  <el-option v-for="(item,index) in TypeList" :key="item.ID" :label="item.TypeName_CHS"
                    :value="item.ID">
                    {{item.TypeName_CHS}}
                  </el-option>
                </el-select>
                <span style="display:none" v-model="TaskFrom.pk_Task"></span>
              </el-form-item>
              <!-- 开始日期 el-date-picker-->
              <el-form-item label="开始日期" prop="StartDate">
                <template>
                  <el-date-picker v-model="TaskFrom.StartDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"
                    style="width:100%">
                  </el-date-picker>
                </template>
              </el-form-item>
              <!-- 标题 el-input -->
              <el-form-item label="标题" prop="Title">
                <el-input v-model="TaskFrom.Title" style="width:100%"></el-input>
              </el-form-item>
              <!-- 描述 textarea -->
              <el-form-item label="描述" prop="Description">
                <el-input v-model="TaskFrom.Description" type="textarea" :rows="5"></el-input>
              </el-form-item>
              <!-- 是否置顶 el-checkbox -->
              <el-form-item label="置顶">
                <el-checkbox v-model="TaskFrom.IsTop" style="padding-bottom: 30px;"></el-checkbox>
              </el-form-item>

            </el-col>
            <el-col :span="12">
              <!-- 状态下拉框 el-select -->
              <el-form-item label="状态" prop="StatusID">
                <el-select v-model="TaskFrom.StatusID" placeholder="请选择" style="width:100%">
                  <el-option v-for="(item,index) in StatusList" :key="item.ID" :label="item.StatusName_CHS"
                    :value="item.ID">
                    {{item.StatusName_CHS}}
                  </el-option>
                </el-select>
              </el-form-item>
              <!-- 结束日期 el-date-picker -->
              <el-form-item label="结束日期" prop="EndDate">
                <template>
                  <el-date-picker v-model="TaskFrom.EndDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"
                    style="width:100%">
                  </el-date-picker>
                </template>
              </el-form-item>
              <!-- 选择接收人 text -->
              <el-form-item label="接收">
                <el-input v-model="UserFullNameData" :disabled="true" ref="SelFullName">
                  <template slot="suffix">
                    <div>
                      <el-button size="mini" type="success" @click="AddUserDialogVisible = true">新增</el-button>
                    </div>
                  </template>
                </el-input>
                <!-- 弹出层，添加接收人 -->

                <el-dialog :lock-scroll="false" :visible.sync="AddUserDialogVisible" @open="DialogShow">
                  <div>
                    <div class="DialogDiv"></div>
                    <div>
                      <!-- <el-button v-show="false" type="success" @click="AdditionalUserClick" icon="el-icon-plus"
                        size="mini">追加接收人
                      </el-button> -->
                      <div style="float:left;padding-left:10px;line-height:30px;padding-top:8px">
                        <h4>指定接收人</h4>
                      </div>
                      <div style="float: right;padding-top:8px">
                        <el-input size="mini" v-model="UserSelect" placeholder="查找...">
                          <el-button slot="append" @click="UserSelectList" icon="el-icon-search" style="width:50px;">
                          </el-button>
                        </el-input>
                      </div>
                    </div>
                    <!-- 用户表格 -->
                    <el-table ref="EditTable" :data="UserData.UserList" @select="CangeCheck" @select-all="CheckALL">
                      <el-table-column type="selection" label="选择" width="50px">
                      </el-table-column>
                      <el-table-column property="DepartmentName" label="部门" width="100px">
                      </el-table-column>
                      <el-table-column property="Address1" label="地址" width="300px"></el-table-column>
                      <el-table-column property="FullName" label="真实姓名" width="120px"></el-table-column>
                      <el-table-column property="UserName" label="用户名" width="120px"></el-table-column>
                      <el-table-column property="RoleName_CHS" label="角色" width="100px"></el-table-column>
                      <el-table-column property="Phone1" label="电话" width="170px"></el-table-column>
                    </el-table>
                    <!-- 分页 -->
                    <div class="foot_page">
                      <el-pagination background layout="prev, pager, next" @current-change="DialogShow(1)"
                        :total="UserData.Count" :current-page.sync="page" :page-size="3">
                      </el-pagination>
                    </div>
                  </div>
                </el-dialog>

              </el-form-item>
              <!-- 评价 textarea -->
              <el-form-item label="评价" prop="Note">
                <el-input v-model="TaskFrom.Note" type="textarea" :rows="5"></el-input>
              </el-form-item>
              <!-- 是否取消 el-checkbox -->
              <el-form-item label="取消">
                <el-checkbox v-model="TaskFrom.IsCancel" style="padding-bottom: 30px;"></el-checkbox>
              </el-form-item>

            </el-col>
            <el-form-item>
              <!-- 提交按钮 -->
              <el-button type="primary" size="small" icon="el-icon-check" @click="submit('TaskFrom')">提交</el-button>
              <!-- 取消按钮 -->
              <el-button @click="$router.go(-1)" size="small" icon="el-icon-close" type="normal">取消</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.Edit_Div1 {
  height: 2px;
  background-color: rgb(180, 180, 180);
}
textarea {
  width: 95%;
  height: 130px;
  border: 1px solid #dcdfe6;
}
a {
  color: white;
  text-decoration: none;
}
.el-row {
  margin-bottom: 10px;
}
.NameEditCls {
  padding: 10px;
}
.el-form-item {
  width: 90%;
}
.DialogDiv {
  height: 2px;
  background-color: rgb(180, 180, 180);
}
.SelectUsertext {
  height: 28px;
  width: 120px;
  border: 1px solid #ccc;
  padding-left: 8px;
}
//底部分页
.foot_page {
  padding: 5px;
  text-align: center;
}
a {
  color: white;
  text-decoration: none;
}
</style>
<script>
export default {
  data () {
    return {
      //类型下拉框数据
      TypeList: [],
      //状态下拉框数据
      StatusList: [],
      //添加修改bug修复
      SubmitLoading: false,
      //表单数据
      TaskFrom: {
        TypeID: null,
        StartDate: null,
        Title: null,
        Description: " ",
        EndDate: null,
        Note: " "
      },
      //传进后台的Type
      Type: 'Add',
      //el-dialog的状态
      AddUserDialogVisible: false,
      //页数
      page: 1,
      //接收人用户数据
      UserData: {},
      //加载接收人文本框
      UserList: [],//已选接收人集合
      UserSelect: '',
      UserFullNameData: '',
      rules: { // 表单验证规则
        TypeID: [
          { required: true, message: '请选择类型', trigger: 'blur' },
        ],
        StartDate: [
          { required: true, message: '请选择开始日期', trigger: 'blur' }
        ],
        Title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          { min: 1, max: 100, message: '长度在1到100个字符' }
        ],
        Description: [
          { min: 1, max: 1000, message: '长度在1到1000个字符' }
        ],
        StatusID: [
          { required: true, message: '请选择状态', trigger: 'blur' }
        ],
        EndDate: [
          { required: true, message: '请选择结束日期', trigger: 'blur' }
        ],
        Note: [
          { min: 1, max: 1000, message: '长度在1到1000个字符' }
        ]
      }
    }
  },
  methods: {
    //获取当前登录用户自己的任务页面信息
    queryData () {
      this.$axios({
        url: '/HrApi/TaskMange/SelectBinding',
        method: 'GET',
      }).then(res => {
        this.TypeList = res.data.TypeIDdata;
        this.StatusList = res.data.StatusIDdata;
      })
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    //增加和修改
    /*
      添加、修改任务
      User:收件人
      Tyep:[Add/Edit],
      Take:表单值
    */
    //提交表单,添加角色
    submit (TaskFrom) {
      //表单验证
      this.$refs[TaskFrom].validate((valid) => {
        if (!valid) {
          return false;
        }
        if (this.UserList.length == 0) {
          this.$message.info('请添加接收人');
        }
        else {
          //执行请求
          this.SubmitLoading = true
          this.$axios({
            url: '/HrApi/TaskMange/EditTaskLsit',
            method: "POST",
            data: this.$Qs.stringify({
              Task: JSON.stringify(this.TaskFrom),
              User: this.UserList.map(n => n.pk_User),
              Type: this.Type,
              UserID: this.$store.state.UserInfo.pk_User
            },
              {
                indices: false
              })
          }).then(res => {
            this.SubmitLoading = false
            if (!res.data.code) {
              this.$message.success(res.data.msg)
              if (this.Type === "Add") {
                this.$refs[TaskFrom].resetFields();
                this.UserFullNameData = "";
              }
            } else {
              this.$message.error(res.data.msg)
            }
          })
        }
      })
    },
    //查询接收人
    UserListData () {
      this.$axios({
        url: '/HrApi/TaskMange/UserList',
        method: 'GET',
        params: {
          page: this.page,
          limit: 5,
        }
      }).then(res => {
        this.UserData = res.data.data;

      })
    },
    //根据姓名查找数据
    UserSelectList () {
      if (this.UserSelect.length != 0) {
        this.page = 1;
        this.$axios({
          url: '/HrApi/TaskMange/UserSelectList',
          method: 'GET',
          params: {
            page: this.page,
            limit: 5,
            UserSelect: this.UserSelect
          }
        }).then(res => {
          this.UserData = res.data.data;
        })
      }
      else {
        this.UserListData();
      }
    },
    CheckALL (val) {
      if (val.length) {
        val.forEach(r => {
          if (this.UserList.map(n => n.pk_User).indexOf(r.pk_User) === -1) {
            this.UserList.push(r)
          }
        })
      } else {
        this.UserList = []
      }


      //选中后给input重新赋值
      this.$refs.SelFullName.$el.childNodes[1].value = this.UserList.map(n => n.FullName)
    },
    CangeCheck (val, r) {
      if (this.UserList.map(n => n.pk_User).indexOf(r.pk_User) != -1) {
        this.UserList.splice(this.UserList.indexOf(r), 1)
      } else {
        this.UserList.push(r)
      }
      //选中后给input重新赋值
      this.$refs.SelFullName.$el.childNodes[1].value = this.UserList.map(n => n.FullName)
    },
    //追加接收人
    AdditionalUserClick () {
      this.UserFullNameData = ""
      this.UserFullNameData += this.UserList.map(n => n.FullName).toString();
      //this.SelList = this.UserList.map(n => +n.pk_User)
      this.AddUserDialogVisible = false;
    },
    //弹窗显示、隐藏
    DialogShow () {
      this.$axios({
        url: '/HrApi/TaskMange/UserList',
        method: 'GET',
        params: {
          page: this.page,
          limit: 3,
        }
      }).then(res => {
        this.UserData = res.data.data;
        //判断是否已经有选择收件人
        if (this.UserList.length) {
          //进行绑定
          let SelFullName = this.UserList.map(n => n.pk_User).toString();
          this.$nextTick(() => {
            this.UserData.UserList.forEach(item => {
              if (SelFullName.indexOf(item.pk_User) != -1) {
                this.$refs.EditTable.toggleRowSelection(item, true)
              }
            })
          })
        }
      })
    }
  },

  mounted () {
    this.queryData();
    if (Object.keys(this.$route.query).length) {
      this.Type = "Updata";
      this.$axios({
        url: '/HrApi/TaskMange/EditSelectBinding',
        method: 'GET',
        params: {
          pk_Task: this.$route.query.id,
          User: this.UserList.map(n => n.pk_User),
        }
      }).then(res => {
        if (!res.data.code) {
          this.TaskFrom = res.data.data.TaskInfo;
          //给已选择接收人集合赋值
          this.UserList = res.data.data.SelNameList
          //绑定接收人名字
          this.$refs.SelFullName.$el.childNodes[1].value = res.data.data.SelNameList.map(n => n.FullName)
          //this.SelList = this.UserList = res.data.data.UserList.split("|").map(n => +n);//2|3
        } else {
          this.$message.error(res.data.msg)
        }
      })
    }
  }
}
</script>